
<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-24 14:39:11
 * @LastEditTime: 2023-07-29 12:31:06
 * @FilePath: \my-wyy\src\views\HomeView.vue
-->
<template>
  <header class="wyy-header">
    <div class="wyy-header-content">
      <div class="wyy-header-logo"><h1><van-icon size="3.5rem" :name="require('../assets/images/logo.png')"/></h1></div>
      <van-button class="wyy-header-download" type="default" url="https://m.music.163.com/m/applink/?scheme=orpheus%3A%2F%2Fsong%2F2011061243" round>下载APP</van-button>
    </div>
  </header>
    <van-tabs class="wyy-header-tabs" v-model:active="active" title-active-color="#d43e33" color="#d43e33" line-width="70px">
      <van-tab title="推荐音乐"><RecommendMusic :songList="songList" :newSongList="newSongList"/></van-tab>
      <van-tab title="热歌榜"><HotMusic :hotSongs="hotSongs" :ishotList="ishotList"/></van-tab>
      <van-tab title="搜索"><SearchSong ref="searchSong" :searchList="searchList" :searched="searched"/></van-tab>
    </van-tabs>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'HomeView'
}
</script>

<script setup>
  import request from '@/utils/request'
  import RecommendMusic from '@/components/Home/RecommendMusic.vue'
  import HotMusic from '@/components/HotMusic/HotMusic.vue'
  import SearchSong from '@/components/Search/SearchSong.vue'
  import {ref, watchEffect, nextTick} from 'vue'
  const searchSong = ref(null)
  const active = ref(0)
  const songList = ref([])
  const newSongList = ref([])
  const hotSongs = ref([])
  const ishotList = ref(false)
  const searchList = ref([])
  const searched = ref(false)
  //获取推荐歌单
 const getRecommendSongList = async () => {
  let result = await request('/personalized', 'get', {limit: 6})
  songList.value = result.result
 }

 //获取最新音乐
 const getNewMusicList = async () => {
  let result = await request('/personalized/newsong', 'get', {limit: 10})
  newSongList.value = result.result
 }

//获取热歌榜id
const getHotMusicId = async () => {
  const data = await request('/toplist', 'get')
  return data.list.filter((item) => {
    return item?.ToplistType === 'H'
  })[0].id
}

// 获取热歌榜歌曲列表
const getHotMusicList = async (id, limit) => {
  const data = await request('/playlist/track/all', 'get', {id, limit})
  hotSongs.value = data.songs
}

// 获取热搜关键词列表
const getHotSearchKey = async () => {
  const data = await request('/search/hot', 'get')
  searchList.value = data.result.hots
}

 watchEffect(async () => {
  if (active.value === 0)
  {
    ishotList.value = false
    getRecommendSongList()
    getNewMusicList()
  }
  if (active.value === 1)
  {
    ishotList.value = true
    let id = await getHotMusicId()
    getHotMusicList(id, 20)
  }
  if (active.value === 2)
  {
    ishotList.value = false
    searched.value = false
    await nextTick()
    searchSong.value.initSearch()
    getHotSearchKey()
  }
 })

</script>

<style lang="scss">
  .wyy-header-content {
    box-sizing: border-box;
    padding: 0 10px;
    width: 100%;
    display: flex;
    height: 84px;
    background-color: #d43e33;
    justify-content: space-between;
    align-items: center;
    .wyy-header-download {
      width: 100px;
      height: 36px;
      background-color: #fff;
      color: #d43e33;
      font-size: 14px;
    }
  }
</style>
